import React, { Component } from 'react';
import service from '../../api'
import  './Login.scss'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { NavBar, Toast, Form, Input, Button } from 'antd-mobile'
class Login extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            visible: false
        }
    }
    back() {
        // console.log(this.props);
        this.props.history.replace('/index/home')
    }
    onFinish(values: any) {
        console.log(values)
        service.user.doLogin(values).then(res => {
            console.log(res)
            if (res.data.code === '200') {
                localStorage.setItem('token', res.data.data.token)
                localStorage.setItem('userid', res.data.data.userid)
                Toast.show({
                    content: '登陆成功'
                })
                setTimeout(() => {
                    this.props.history.replace('/index/home')
                }, 1000)
            }
            else {
                Toast.show({
                    content: res.data.message
                })
            }

        })
    }
    see() {
        this.setState({
            visible: true
        })
    }
    nosee() {
        this.setState({
            visible: false
        })
    }
    render() {
        return (
            <div className='login'>
                <header>
                    <NavBar onBack={() => { this.back() }}>登录页</NavBar>
                </header>
                <Form layout='horizontal'
                    // mode='card'
                    onFinish={this.onFinish.bind(this)}
                    footer={
                        <Button block type='submit' shape='rounded' color='danger' size='large'>
                            登录
                        </Button>
                    }
                >
                    <Form.Item label='' validateFirst name='loginname' rules={[{ required: true, message: '请输入手机号' },
                    { pattern: /^1[34578]\d{9}$/, message: '请输入正确手机号' }
                    ]}>
                        <Input placeholder='请输入手机号' clearable />
                    </Form.Item>
                    <Form.Item label='' name='password'
                    extra={
                        <div className='eye'>
                        {!this.state.visible ? (
                            <EyeInvisibleOutline onClick={() => { this.see() }} />
                        ) : (
                            <EyeOutline onClick={() => {this.nosee()}} />
                        )}
                    </div>
                      }
                        rules={
                            [
                                { required: true, message: '请输入密码' },
                            ]
                        }>
                            <Input
                                className='input'
                                placeholder='请输入密码'
                                type={this.state.visible ? 'text' : 'password'}
                            />
                    </Form.Item>
                </Form>
                <a href="/register">没有账号？去注册</a>
            </div >
        );
    }
}

export default Login;